<?php
@session_start();
if (!empty($_SESSION['usuario'])) {
    
include_once '../../Model/M_Zona.php';
include_once '../../Model/M_Mesa.php';

$zona = new M_Zona();
$lstZona = $zona->ListarZonas_TODOS();

$mesa = new M_Mesa();


?>

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="../js/jquery-1.8.2.js"></script>
        <title></title>
        <style>
            html,body{
                width: 100%;
                height: 100%;
                margin: 0px;
                padding: 0px;
            }
            .capaPrincipal{
                width: 100%;
                height: 100%;
            }
            .capaIzquierda{
                float: left;
                height: 100%;
                width: -moz-calc(100% - 100px); 
                width: -webkit-calc(100% - 100px); 
                width: calc(100% - 100px);
                font-weight: bold;
            }
            .capaDerecha{
                float: right;
                height: 100%;
                width: 100px;
                font-weight: bold;
            }
            .zona{
                margin: 10px;
                float: left;
                font-weight: bolder;
                width: -moz-calc(100% - 20px); 
                width: -webkit-calc(100% - 20px); 
                width: calc(100% - 20px); 
            }
            .zonaTitulo{
                height: auto;
                border: 3px solid #A8A8A8;
                -webkit-box-shadow: 3px 3px 3px #A8A8A8;
                -moz-box-shadow: 3px 3px 3px #A8A8A8;
                font-size: 18px;
                font-family: sans-serif;
                text-shadow: 3px 3px 3px #aaa;
                background: #f5f6f6;
                background: -moz-linear-gradient(-45deg,  #f5f6f6 0%, #dbdce2 21%, #b8bac6 49%, #dddfe3 80%, #f5f6f6 100%);
                background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#f5f6f6), color-stop(21%,#dbdce2), color-stop(49%,#b8bac6), color-stop(80%,#dddfe3), color-stop(100%,#f5f6f6));
                background: -webkit-linear-gradient(-45deg,  #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%);
                background: -o-linear-gradient(-45deg,  #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%);
                background: -ms-linear-gradient(-45deg,  #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%);
                background: linear-gradient(135deg,  #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=1 );
            }
            .zonaDetalle{
                float: left;
                border: 3px solid #A8A8A8;
                -webkit-box-shadow: 3px 3px 3px #A8A8A8;
                -moz-box-shadow: 3px 3px 3px #A8A8A8;
                width: -moz-calc(100% - 6px); 
                width: -webkit-calc(100% - 6px); 
                width: calc(100% - 6px);
                background: #e2e2e2;
                background: -moz-linear-gradient(-45deg,  #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%);
                background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe));
                background: -webkit-linear-gradient(-45deg,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
                background: -o-linear-gradient(-45deg,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
                background: -ms-linear-gradient(-45deg,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
                background: linear-gradient(135deg,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=1 );
            }
            .mesa{
                width: 115px;
                height: 45px;
                float: left;
                margin: 10px;
                border: 2px solid #919191;
                -webkit-box-shadow: 2px 2px 5px #919191;
                -moz-box-shadow: 2px 2px 5px #919191;
                text-decoration: none;
                background: #9dd53a;
                background: -moz-linear-gradient(-45deg,  #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%);
                background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a));
                background: -webkit-linear-gradient(-45deg,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);
                background: -o-linear-gradient(-45deg,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);
                background: -ms-linear-gradient(-45deg,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);
                background: linear-gradient(135deg,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=1 );
            }
            .mesaOcupada{
                width: 115px;
                height: 45px;
                float: left;
                margin: 10px;
                border: 2px solid #919191;
                -webkit-box-shadow: 2px 2px 5px #919191;
                -moz-box-shadow: 2px 2px 5px #919191;
                text-decoration: none;
                background: #efc5ca;
                background: -moz-linear-gradient(-45deg,  #efc5ca 0%, #d24b5a 50%, #ba2737 51%, #f18e99 100%);
                background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#efc5ca), color-stop(50%,#d24b5a), color-stop(51%,#ba2737), color-stop(100%,#f18e99));
                background: -webkit-linear-gradient(-45deg,  #efc5ca 0%,#d24b5a 50%,#ba2737 51%,#f18e99 100%);
                background: -o-linear-gradient(-45deg,  #efc5ca 0%,#d24b5a 50%,#ba2737 51%,#f18e99 100%);
                background: -ms-linear-gradient(-45deg,  #efc5ca 0%,#d24b5a 50%,#ba2737 51%,#f18e99 100%);
                background: linear-gradient(135deg,  #efc5ca 0%,#d24b5a 50%,#ba2737 51%,#f18e99 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efc5ca', endColorstr='#f18e99',GradientType=1 );
            }
            .mesaJuntando{
                width: 115px;
                height: 45px;
                float: left;
                margin: 10px;
                border: 2px solid #919191;
                -webkit-box-shadow: 2px 2px 5px #919191;
                -moz-box-shadow: 2px 2px 5px #919191;
                text-decoration: none;
                background: #fceabb;
                background: -moz-linear-gradient(-45deg,  #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%);
                background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#fceabb), color-stop(50%,#fccd4d), color-stop(51%,#f8b500), color-stop(100%,#fbdf93));
                background: -webkit-linear-gradient(-45deg,  #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%);
                background: -o-linear-gradient(-45deg,  #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%);
                background: -ms-linear-gradient(-45deg,  #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%);
                background: linear-gradient(135deg,  #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93',GradientType=1 );
            }
            .mesaTitulo{
                border: 1px solid #919191;
                text-shadow: 3px 3px 3px #aaa;
            }
            .mesaDetalle{
                height: 24px;
                width: 100%;
                border: 1px solid #919191;
            }
            .mesaCantidadPersonas{
                float: left;
                width: 21px;
                height: 24px;
            }
            .mesaTotal{
                float: right;
                width: calc(100% - 24px);
                height: 24px;
                border-left: 2px solid #919191;
            }
            a{
                text-decoration: none;
                color: black;
            }
            .opciones{
                margin-bottom: 10px;
                margin-right: 10px;
                margin-top: 10px;
            }
            .iniciarPedido{
                font-weight: bolder;
                font-size: 20px;
                -webkit-box-shadow: 4px 4px 4px #999;
                -moz-box-shadow: 4px 4px 4px #999;
                color: #727272;
                text-shadow: 3px 3px 3px #aaa;
                background: #d2dfed;
                background: -moz-linear-gradient(-45deg,  #d2dfed 0%, #c8d7eb 26%, #bed0ea 51%, #a6c0e3 51%, #afc7e8 62%, #bad0ef 75%, #99b5db 88%, #799bc8 100%);
                background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#d2dfed), color-stop(26%,#c8d7eb), color-stop(51%,#bed0ea), color-stop(51%,#a6c0e3), color-stop(62%,#afc7e8), color-stop(75%,#bad0ef), color-stop(88%,#99b5db), color-stop(100%,#799bc8));
                background: -webkit-linear-gradient(-45deg,  #d2dfed 0%,#c8d7eb 26%,#bed0ea 51%,#a6c0e3 51%,#afc7e8 62%,#bad0ef 75%,#99b5db 88%,#799bc8 100%);
                background: -o-linear-gradient(-45deg,  #d2dfed 0%,#c8d7eb 26%,#bed0ea 51%,#a6c0e3 51%,#afc7e8 62%,#bad0ef 75%,#99b5db 88%,#799bc8 100%);
                background: -ms-linear-gradient(-45deg,  #d2dfed 0%,#c8d7eb 26%,#bed0ea 51%,#a6c0e3 51%,#afc7e8 62%,#bad0ef 75%,#99b5db 88%,#799bc8 100%);
                background: linear-gradient(135deg,  #d2dfed 0%,#c8d7eb 26%,#bed0ea 51%,#a6c0e3 51%,#afc7e8 62%,#bad0ef 75%,#99b5db 88%,#799bc8 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2dfed', endColorstr='#799bc8',GradientType=1 );
                cursor: pointer;
                border-width: 4px;
                height: 60px;
                float: left;
                width: 100%;
            }
            .iniciarPedidoDisable{
                height: 60px;
                font-weight: bolder;
                font-size: 20px;
                -webkit-box-shadow: 4px 4px 4px #999;
                -moz-box-shadow: 4px 4px 4px #999;
                color: #727272;
                text-shadow: 3px 3px 3px #aaa;
                background: #fcfff4;
                background: -moz-linear-gradient(-45deg,  #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
                background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#fcfff4), color-stop(40%,#dfe5d7), color-stop(100%,#b3bead));
                background: -webkit-linear-gradient(-45deg,  #fcfff4 0%,#dfe5d7 40%,#b3bead 100%);
                background: -o-linear-gradient(-45deg,  #fcfff4 0%,#dfe5d7 40%,#b3bead 100%);
                background: -ms-linear-gradient(-45deg,  #fcfff4 0%,#dfe5d7 40%,#b3bead 100%);
                background: linear-gradient(135deg,  #fcfff4 0%,#dfe5d7 40%,#b3bead 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=1 );
                cursor: default;
                border-width: 4px;
                width: 100%;
            }
            .leyendaMesaJuntando{
                background: -moz-linear-gradient(-45deg,  #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%);
                background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#fceabb), color-stop(50%,#fccd4d), color-stop(51%,#f8b500), color-stop(100%,#fbdf93));
                background: -webkit-linear-gradient(-45deg,  #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%);
                background: -o-linear-gradient(-45deg,  #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%);
                background: -ms-linear-gradient(-45deg,  #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%);
                background: linear-gradient(135deg,  #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93',GradientType=1 );
                -webkit-box-shadow: 4px 4px 4px #999;
                -moz-box-shadow: 4px 4px 4px #999;
                border-width: 4px;
                height: 60px;
                top: 150px;
                width: 100%;
                margin-top: 10px;
            }
            .leyendaMesaLibre{
                background: #9dd53a;
                background: -moz-linear-gradient(-45deg,  #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%);
                background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a));
                background: -webkit-linear-gradient(-45deg,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);
                background: -o-linear-gradient(-45deg,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);
                background: -ms-linear-gradient(-45deg,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);
                background: linear-gradient(135deg,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=1 );
                -webkit-box-shadow: 4px 4px 4px #999;
                -moz-box-shadow: 4px 4px 4px #999;
                border-width: 4px;
                height: 60px;
                width: 100%;
                margin-top: 10px;
            }
            .leyendaMesaOcupada{
                background: #efc5ca;
                background: -moz-linear-gradient(-45deg,  #efc5ca 0%, #d24b5a 50%, #ba2737 51%, #f18e99 100%);
                background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#efc5ca), color-stop(50%,#d24b5a), color-stop(51%,#ba2737), color-stop(100%,#f18e99));
                background: -webkit-linear-gradient(-45deg,  #efc5ca 0%,#d24b5a 50%,#ba2737 51%,#f18e99 100%);
                background: -o-linear-gradient(-45deg,  #efc5ca 0%,#d24b5a 50%,#ba2737 51%,#f18e99 100%);
                background: -ms-linear-gradient(-45deg,  #efc5ca 0%,#d24b5a 50%,#ba2737 51%,#f18e99 100%);
                background: linear-gradient(135deg,  #efc5ca 0%,#d24b5a 50%,#ba2737 51%,#f18e99 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efc5ca', endColorstr='#f18e99',GradientType=1 );
                -webkit-box-shadow: 4px 4px 4px #999;
                -moz-box-shadow: 4px 4px 4px #999;
                border-width: 4px;
                height: 60px;
                width: 100%;
                margin-top: 10px;
                cursor: pointer;
            }
        </style>
        <script>
            function eligeFuncionalidad(id){
                var elemento = document.getElementById(id);
                if(elemento.className=="mesaOcupada"){
                    location.href='V_Pedido.php';                    
                }else if(elemento.className=="mesaJuntando"){
                    elemento.className = "mesa";
                    $('#row'+id).remove();
                }
                else{
                    document.getElementById("btnIniciarPedido").disabled=false;
                    document.getElementById("btnIniciarPedido").className="iniciarPedido";
                    elemento.className = "mesaJuntando";
                    
                    //alert(x[i].value);
                    $('#grilla > tbody:last').append('<tr id="row'+id+'"><td><input type="hidden" name="id_m[]" value="'+id+'" /></td></tr>');


                }
                var elemArray = document.getElementsByClassName("mesaJuntando");
                if(elemArray.length == 0)
                {
                    document.getElementById("btnIniciarPedido").disabled=true;
                    document.getElementById("btnIniciarPedido").className="iniciarPedidoDisable";
                }        
            }
            function eliminardatos(dato) {
                $(dato).parent().parent().remove();
            }
        </script>
    </head>
    <body>
        <form name="form" action="../../Controller/C_Pedido_Iniciar.php" method="post" >
            <div align="center" class="capaPrincipal">
                <div class="capaIzquierda">
                    <label style='text-align: left;'>Mozo: </label><?=$_SESSION['nombreMozo']?>
                    <? for($i=0; $i<count($lstZona); $i++){ 
                        $idzona = $lstZona[$i]['id_zona'];                    
                        $nombre = $lstZona[$i]['nombre'];

                        $mesa->setID_Zona($idzona);
                        $lstMesa = $mesa->searchMesasxZona_All();
                        if (count($lstMesa) > 0){
                     ?>   

                    <div class="zona">
                        <input type="hidden" name="idzona" value="<?=$idzona?>" />
                        <div class="zonaTitulo"><?= $nombre ?></div>
                        <div class="zonaDetalle">
                            <? for($j=0; $j<count($lstMesa); $j++){
                                $m_nombre = $lstMesa[$j]['nombre'];
                                $m_idmesa = $lstMesa[$j]['id_mesa'];
                                $m_cap    = $lstMesa[$j]['capacidad'];

                                if($lstMesa[$j]['estado'] == 't'){
                                    $estado[$j] = 'mesaOcupada';                                 
                                }else
                                    { $estado[$j] = 'mesa';}
                                ?>
                            <a href="#">
                                <input type="hidden" name="idmesa" value="<?=$m_idmesa?>" />
                                <div id="<?=$lstMesa[$j]['id_mesa']?>" class="<?=$estado[$j];?>" onclick="eligeFuncionalidad(id)">
                                    <div class="mesaTitulo"><?=$m_nombre;?></div>
                                    <div class="mesaDetalle">
                                        <div class="mesaCantidadPersonas"><?=$m_cap?></div>
                                        <div class="mesaTotal"></div>
                                    </div>
                                </div>
                            </a>
                            <?}?>                                                
                        </div>
                    </div>
                    <? }else{}
                    }?>                                              
                </div>
                <div class="capaDerecha">
                    <table id="grilla"  border="1" align="center" style="border-collapse: collapse">
                        <thead bgcolor="#C0C0C0">
                            <tr>
                                <th>Mesas</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                    <div class="opciones">
                        <input id="btnIniciarPedido" class="iniciarPedidoDisable" type="submit" value="Inciar Pedido"/>

                        <label id="leyendaMesaLibre" class="leyendaMesaLibre" disabled="">Mesa Libre</label>
                        <label id="leyendaMesaOcupada" class="leyendaMesaOcupada" disabled="">Mesa Ocupada</label>
                        <label id="leyendaMesaJuntando" class="leyendaMesaJuntando" disabled="">Mesa Por Juntar</label>
                        <a href="V_Mosos.php">
                        <label id="leyendaMesaJuntando" class="leyendaMesaJuntando">Asignar Moso</label>
                        </a>
                        <a href="../../Controller/C_Logout.php">
                        <label id="leyendaMesaOcupada" class="leyendaMesaOcupada">SALIR</label>
                        </a>
                    </div>
                </div>  
            </div>
        </form>
<?php
    } else {
    ?>
    <script language="JavaScript" type="text/javascript">
        alert('Su session a expirado, por favor Ingrese Nuevamente');
        location.href = '../V_Login.php';
    </script>
    <?php } ?>
    </body>      
</html>
